<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "企业用工"
      },
      // 暂时需要登录，后续再改
       "needLogin": true
    }
</route>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import cj_ser_1 from '../static-assets/circle/cj_ser_1.png'
import cj_ser_2 from '../static-assets/circle/cj_ser_2.png'
import cj_ser_3 from '../static-assets/circle/cj_ser_3.png'
import point_1 from '../static-assets/circle/point_1.png'
import point_2 from '../static-assets/circle/point_2.png'
import point_3 from '../static-assets/circle/point_3.png'

// 服务项目
const services = ref([
  {
    id: 1,
    title: '潜在风险高',
    description: '关系模糊，潜在法律风险和关系争议',
    circle: point_1,
    cj_ser: cj_ser_1,
  },
  {
    id: 2,
    title: '人力预算紧',
    description: '岗位编制有限，全职员工成本预算紧',
    circle: point_2,
    cj_ser: cj_ser_2,
  },
  {
    id: 3,
    title: '资金结算乱',
    description: '对私结算难入账，成本税前列支难',
    circle: point_3,
    cj_ser: cj_ser_3,
  },
])

const model = reactive<{
  phone: string
}>({
  phone: '',
})

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        uni.showToast({
          title: '校验通过',
          icon: 'success',
        })
        // toast.success('校验通过')
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<template>
  <view class="bg-#f5f5f5 pb-30rpx">
    <!-- 顶部banner -->
    <view class="h-350rpx overflow-hidden p-20rpx">
      <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="widthFix" :lazy-load="true" />
    </view>

    <!-- 解决方案 -->
    <view class="m-20rpx rounded-12rpx bg-white p-30rpx">
      <view class="mb-20rpx text-left text-32rpx font-bold">
        定制降本增效专属解决方案
      </view>
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <view style="border-bottom: 1px solid #e5e5e5;">
            <wd-input
              v-model="model.phone"
              label="手机号"
              label-width="31%"
              prop="phone"
              :maxlength="11"
              clearable
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请输入手机号' }]"
            >
              <template #prefix>
                <image
                  src="/static/phone.svg"
                  mode="scaleToFill"
                  class="h-40rpx w-40rpx"
                />
              </template>
            </wd-input>
          </view>
        </wd-cell-group>
        <view class="mt-40rpx">
          <wd-button type="primary" size="large" custom-class="red_button" block @click="handleSubmit">
            立即咨询
          </wd-button>
        </view>
      </wd-form>
    </view>

    <!-- 企业用工痛点 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            企业用工痛点
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-3 gap-15rpx">
            <view
              v-for="service in services"
              :key="service.id"
              class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 px-10rpx py-40rpx"
            >
              <image :src="service.cj_ser" mode="aspectFill" class="absolute inset-0 h-full w-full" :lazy-load="true" />
              <view class="relative z-10">
                <view class="mb-10rpx flex items-center truncate text-28rpx font-bold">
                  {{ service.title }}
                  <image
                    :src="service.circle"
                    mode="aspectFill"
                    class="ml-2rpx h-26rpx w-26rpx"
                  />
                </view>
                <view class="line-clamp-3 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="relative m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view class="text-32rpx text-black font-bold">
        就业发展趋势洞察
      </view>
      <view class="mt-20rpx">
        <view class="flex flex-row overflow-hidden rounded-12rpx">
          <!-- 传统雇佣关系 -->
          <view class="flex-1 bg-#f9f9f9">
            <view class="px-15rpx py-20rpx text-center text-28rpx text-#333 font-bold">
              传统雇佣关系
            </view>
            <view class="flex items-center justify-center bg-#edeef1 py-18rpx text-22rpx text-#666">
              <text class="inline-block">
                稳定结构，有效分工
              </text>
            </view>
            <view class="flex items-center justify-center py-18rpx text-22rpx text-#666">
              <text class="inline-block">
                层级 | 服从，约束 | 标准
              </text>
            </view>
            <view class="flex items-center justify-center bg-#edeef1 py-18rpx text-22rpx text-#666">
              <text class="inline-block">
                效率提升，成本覆盖
              </text>
            </view>
            <view class="flex items-center justify-center py-18rpx text-22rpx text-#666">
              <text class="inline-block">
                巨大内耗，管理成本高
              </text>
            </view>
          </view>

          <!-- VS -->
          <view class="absolute left-[44%] top-[44%] h-[70rpx] w-[70rpx] flex items-center justify-center rounded-full bg-white" style="border: 8rpx solid #FBD7BC;">
            <view class="text-32rpx text-#FF6600 font-bold">
              VS
            </view>
          </view>

          <!-- 新型雇佣关系 -->
          <view class="flex-1 bg-#FF6600 text-white">
            <!-- 皇冠图标 -->
            <view class="absolute right-0 top-0">
              <view class="h-40rpx w-40rpx">
                <view class="h-full w-full rotate-45 transform border-l-8rpx border-r-8rpx border-t-8rpx border-#FFD700" />
              </view>
            </view>

            <view class="flex items-center justify-center py-28rpx text-center text-26rpx font-bold">
              新型雇佣关系
            </view>
            <view class="flex items-center justify-center bg-#f9b263 py-28rpx text-22rpx text-white">
              <text class="inline-block">
                就业能力持续提升
              </text>
            </view>
            <view class="flex items-center justify-center py-28rpx text-22rpx">
              <text class="inline-block">
                非标准、非标准、非劳动关系
              </text>
            </view>
            <view class="flex items-center justify-center bg-#f9b263 py-28rpx text-22rpx text-white">
              <text class="inline-block">
                从雇佣向合作关系转变
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="m-20rpx rounded-12rpx bg-white p-20rpx">
      <view class="mb-30rpx flex items-center pl-10rpx text-32rpx font-bold">
        合作机构
      </view>
      <scroll-view scroll-x class="whitespace-nowrap px-4" style="width: auto;">
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
      </scroll-view>
    </view>
  </view>
</template>
